<template>
    <div id="header" class="header">
        <div id="logo" >
            <img src="~/static/logo.png" class="logo">
            <h3 class="title">医咨医疗辅助诊断平台</h3>
        </div>
        <div id="user" class="user">
            <a-avatar src="https://joeschmoe.io/api/v1/random" style="float:right"></a-avatar>
            <h3 class="name">{{docName}}医生,您好</h3>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            docName:"张三"
        }
    }
}
</script>
<style lang="scss" scoped>
.header{
    width: 100%;
    height: 8vh;
    display: block;
    .logo{
        float: left;
        width: 4%;
        background-color: transparent;
        margin-left: 1vh;
        padding: 0.2vh;
    }
    .title{
        float: left;
        width: 19%;
        font-size: 26px;
        font-family: cursive;
        margin-left: 0.5em;
        color: rgba(82, 183, 245, 100);
        font-weight: bold;
        margin-top: 0.4em;
    }
    .name{
        float: right;
        font-size: 15px;
        font-family: cursive;
        color: rgba(82, 183, 245, 100);
        font-weight: bold;
        margin-top: 0.8vh;
        margin-right: 1.2vh;
    }
    .user{
        float: right;
        margin-top: 2vh;
        margin-right: 2vh;
    }
}
</style>